<template>
  <d2-container>
    <template slot="header">
      <!-- 搜索框 -->
            <el-button size="medium" type="primary" icon="el-icon-circle-plus-outline" @click="insertPage()">新增</el-button>
            <!-- <el-button size="small" type="primary" icon="el-icon-share">分享</el-button> -->
            <div style="float:right">
            <el-input size="medium" v-model="searchInput.assessPersonName" placeholder="被考核人" class="inputBox" style="margin-left:20px;width: 200px;height: 20px;"></el-input>
            <!-- <el-input size="medium" v-model="searchInput.check" placeholder="审核状态" class="inputBox" style="margin-left:20px;width: 200px;height: 50px;"></el-input> -->
            <!-- 审核状态搜索 -->
            <el-select v-model="searchInput.isCheck" placeholder="审核状态" clearable style="margin-left:20px;width: 200px;height: 50px;">
              <el-option
                v-for="item in checkstatus"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
      <!-- 选择制度 -->
            <el-select v-model="searchInput.clauseType" placeholder="请选择" clearable style="margin-left:20px;width: 200px;height: 50px;">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.label"
                :value="item.clauseContent">
              </el-option>
            </el-select>
            <el-button size="medium" type="primary" icon="el-icon-search" style="margin-left:20px;"   @click="search()">搜索</el-button>
            </div>
    </template>
    <!-- 按钮 -->
    <template>
      <!-- table -->
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="orderNumber" label="日考核单号" show-overflow-tooltip>
          <!-- <template slot-scope="scope">{{ scope.row.orderNumber }}</template> -->
        </el-table-column>
        <el-table-column prop="assessPersonName" label="被考核人" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="assessType" label="考核分类" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="clauseType" label="制度来源" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="assessedName" label="考核人" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="bonus" label="下发奖金" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="check" label="是否审核" show-overflow-tooltip>
          <template slot-scope="scope">
            <div>{{scope.row.check== "1"?'已审核':'未审核'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="createName" label="创建人" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="assessTime" label="考核时间" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="考核内容">
            <el-popover
              slot-scope="scope"
              placement="right"
              width="400"
              trigger="click">
              <el-table  height="250" :data="tableDetail">
                <el-table-column width="150" property="name" label="考核名"></el-table-column>
                <el-table-column width="100" property="money" label="扣奖"></el-table-column>
                <el-table-column width="300" property="score" label="扣分"></el-table-column>
              </el-table>
              <el-button slot="reference" @click="findDetail(scope.row)">查看详情</el-button>
            </el-popover>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope" >
              <el-button size="small" type="warning" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)"></el-button>
              <el-button size="small" type="danger" icon="el-icon-delete" @click="deleteAssess(scope.$index, scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination v-bind:child-msg="pageparm" @callFather="callFather" style="float:right"></Pagination>
      <!-- 编辑界面 -->
      <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
        <el-form label-width="120px" :model="editForm" ref="editForm">
          <el-form-item label="考核分类" prop="assessType">
            <el-input size="small" v-model="editForm.assessType" auto-complete="off" placeholder="考核分类"></el-input>
          </el-form-item>
          <el-form-item label="制度来源" prop="sourceSystem">
              <el-select v-model="clauseValue" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.label"
                  :value="item.clauseContent">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="考核人" prop="assessPerson">
            <el-input size="small" v-model="editForm.assessPerson" auto-complete="off" placeholder="考核人"></el-input>
          </el-form-item>
          <el-form-item label="考核时间" prop="assessTime">
            <el-input size="small" v-model="editForm.assessTime" auto-complete="off" placeholder="考核时间"></el-input>
          </el-form-item>
          <el-form-item label="下发奖金" prop="bonus">
            <el-input size="small" v-model="editForm.bonus" auto-complete="off" placeholder="下发奖金"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="closeDialog">取消</el-button>
          <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm(editForm)">保存</el-button>
        </div>
      </el-dialog>

    </template>

  </d2-container>
</template>
<style>
  .block {
    float: right;
  }
  .inputBox {
    width: 25%;
  }
  .botton_souch {
    margin-left: 5%;
  }
</style>
<script>
import Pagination from '@/components/Pagination.vue'
export default {
  data () {
    return {
      // 搜索框
      input: '',
      editFormVisible: false, // 控制编辑页面显示与隐藏
      title: '添加',
      editForm: {
        id: null,
        assessType: '',
        sourceSystem: '',
        clauseType: '',
        assessPerson: '',
        assessTime: '',
        bonus: 0
      },
      searchInput: {
        assessPersonName: '',
        isCheck: '',
        clauseType: ''
      },
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 5,
        total: 10

      },
      pageRequest: {
        currentPage: 1,
        limit: 5,
        assessDetail: {
          id: 0,
          assessType: '',
          sourceSystem: 0,
          uid: 0,
          assessPerson: '',
          projectId: '',
          creator: 0,
          createTime: '',
          assessTime: '',
          check: '',
          checkPersonId: 0,
          content: '',
          bonus: 0,
          updated: 0,
          updateTime: ''
        }
      },
      // table
      tableData: [],
      // 选择器制度来源
      options: [],
      clauseValue: '',
      // 查看考核内容详情
      tableDetail: [],
      multipleSelection: [],
      // 审核状态的选择器
      checkstatus: [{
        value: '1',
        label: '已审核'
      }, {
        value: '0',
        label: '未审核'
      }
      ]
    }
  },
  // 注册分页组件
  components: {
    Pagination
  },
  // 加载页面就执行的方法
  created () {
    this.getdata()
    this.getClause()
  },
  // 只有调用才执行的方法
  methods: {
    // 页面加载展示数据
    getdata () {
      this.$request({
        url: 'dailyAssess/findAll',
        method: 'post',
        data: this.pageRequest
      }).then((res) => {
        this.tableData = res.list
        // 初始化分页组件显示总数
        this.pageparm.total = res.total
        console.log(res)
      })
    },
    // 获取制度来源列表
    getClause () {
      this.$request({
        url: 'dayAssessClause/findClause',
        method: 'post'
      }).then((res) => {
        this.options = res
        console.log(res)
      })
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 分页插件事件
    callFather (parm) {
      this.pageRequest.currentPage = parm.currentPage
      this.pageRequest.limit = parm.pageSize
      this.getdata()
    },
    // 搜索事件
    search () {
      this.$request({
        url: 'dailyAssess/findConditional',
        method: 'post',
        data: this.searchInput
      }).then((res) => {
        this.tableData = res
        console.log(res)
      })
    },
    // 查看考核内容详情
    findDetail (pojId) {
      this.$request({
        url: 'dayAssessDetail/findById',
        method: 'post',
        params: { idStr: pojId.projectId }
      }).then((res) => {
        this.tableDetail = res
        console.log(res)
      })
    },
    // 显示编辑界面
    handleEdit: function (index, row) {
      this.editFormVisible = true
      this.title = '修改'
      this.editForm.id = row.id
      this.editForm.assessType = row.assessType
      this.editForm.assessPerson = row.assessPerson
      // this.editForm.projectId = row.projectId
      this.editForm.assessTime = row.assessTime
      this.editForm.bonus = row.bonus
    },
    // 修改方法
    submitForm (editData) {
      editData.clauseType = this.clauseValue
      this.$request({
        url: 'dailyAssess/update',
        method: 'post',
        data: editData
      }).then((res) => {
        console.log(res)
      })
      this.closeDialog()
      this.getdata(this.formInline)
    },
    // 关闭编辑、增加弹出框
    closeDialog () {
      this.editFormVisible = false
    },
    // 删除 个人日考核详情
    deleteAssess (index, row) {
      this.$request({
        url: 'dailyAssess/delete',
        method: 'post',
        data: row
      }).then((res) => {
        console.log(res)
      })
      this.getdata(this.formInline)
    },
    // 新增路由跳转
    insertPage () {
      this.$router.push('/addassess')
    }
  }
}
</script>
